<template>
    <div class="lampListDetails">
        <div class="box80">
            <div class="sct">
                <div class="seriesPage wid100">
                    <div class="lt">
                        <div class="wid100 font20">
                            <span @click="brandPage(detailInfo.brandId)">{{detailInfo.brandName}}</span> 
                            <span>{{detailInfo.seriesName}}</span>
                            <span class="font14">
                                <!-- <img src="@/assets/images/icon5_03.png" alt="">0 -->
                            </span> 
                        </div>
                        <div class="swiper-container seriesPage2">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-if="detailInfo.seriesPic1 != null && detailInfo.seriesPic1 != ''"><img  @click="viewPicture(ImgPath+detailInfo.seriesPic1)" :src="ImgPath + detailInfo.seriesPic1"></div>
                                <div class="swiper-slide" v-if="detailInfo.seriesPic2 != null && detailInfo.seriesPic2 != ''"><img  @click="viewPicture(ImgPath+detailInfo.seriesPic2)" :src="ImgPath + detailInfo.seriesPic2"></div>
                                <div class="swiper-slide" v-if="detailInfo.seriesPic3 != null && detailInfo.seriesPic3 != ''"><img  @click="viewPicture(ImgPath+detailInfo.seriesPic3)" :src="ImgPath + detailInfo.seriesPic3"></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="rt">
                        <!-- <div class="font20">介绍系列 </div> -->
                        <!-- <div class="font24">{{detailInfo.seriesName}}</div> -->
                        <p class="font14" v-html="detailInfo.seriesBrief"></p>
                    </div>
                </div>
                 <div class="sameSeries">
                <div class="font20" style="clear:both">同系列灯具</div>
                    <ul style="width:50%">
                        
                       <li >
                            <span class="trd">功      率：</span>
                            <div class="block" v-if="searchParam.lumPowerMin && searchParam.lumPowerMax">
                                <el-slider
                                range
                                v-model="lumPowerValue"
                                :min="searchParam.lumPowerMin"
                                :max="searchParam.lumPowerMax"
                                :marks="lumPowerRound"
                                :show-tooltip="showSliderTips(lumPowerValue)"
                                @change="changeTiao()"
                                >
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero"  disabled :show-tooltip="false"></el-slider></div>
                        </li>
                    
                        <li >
                            <span class="trd">光  束  角：</span>
                            <div class="block" v-if="searchParam.lightAngleMin && searchParam.lightAngleMax">
                                <el-slider
                                v-model="lightAngleValue"
                                range
                                :min="searchParam.lightAngleMin"
                                :max="searchParam.lightAngleMax"
                                :marks="lightAngleRound"
                                :show-tooltip="showSliderTips(lightAngleValue)"
                                @change="changeTiao()">
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero"  disabled :show-tooltip="false"></el-slider></div>
                    </li>
                        <li >
                        <span class="trd">光  通  量：</span>
                            <div class="block" v-if="searchParam.guangTongLiangMin && searchParam.guangTongLiangMax">
                                <el-slider
                                v-model="guangTongLiangValue"
                                range
                                :min="searchParam.guangTongLiangMin"
                                :max="searchParam.guangTongLiangMax"
                                :marks="guangTongLiangRound"
                                :show-tooltip="showSliderTips(guangTongLiangValue)"
                                @change="changeTiao()">
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero"  disabled :show-tooltip="false"></el-slider></div>
                    </li>
                     
                    <li >
                        <span class="trd">Ra：</span>
                            <div class="block" v-if="searchParam.raMin && searchParam.raMax">
                                <el-slider
                                v-model="raValue"
                                range
                                :min="searchParam.raMin"
                                :max="searchParam.raMax"
                                :marks="raRound"
                                :show-tooltip="showSliderTips(raValue)"
                                @change="changeTiao()">
                                </el-slider>
                            </div>
                            <div class="block" v-else><el-slider v-model="zero"  disabled :show-tooltip="false"></el-slider></div>
                    </li>
                    </ul>
                    <ul style="width:50%" class="ulss">
                        
                     <li>
                            <span class="trd">灯具类型：</span>
                            <el-checkbox-group v-model="lumTypeList"  size="medium">
                                <el-checkbox-button v-for="item in searchParam2.lumType" :label="item.lumType" :key="item.lumType">{{item.lumTypeName}}</el-checkbox-button>
                            </el-checkbox-group>
                        </li>
                     <li>
                         <span class="trd">色温色彩：</span>
                            <el-checkbox-group v-model="colorTempList"  size="medium">
                                <el-checkbox-button border v-for="item in searchParam2.colorTemp"  :label="item.colorTemp">{{item.colorTemp}}</el-checkbox-button>
                            </el-checkbox-group>
                    </li>
                     <li>
                        <span class="trd">控制方式：</span>
                            <el-checkbox-group v-model="controlTypeStrList"  size="medium">
                                <el-checkbox-button border v-for="item in searchParam2.controlType"  :label="item.controlTypeStr">{{item.controlTypeStr}}</el-checkbox-button>
                            </el-checkbox-group>
                    </li>
                    </ul>
                    <div  style="clear:both"></div>
                </div>
            </div>
            <div class="screenTables">
                <productLampTable ref="table" v-on:tableOver="tableOver"></productLampTable>
            </div>
        </div>
    <!--查看图片 -->
    <el-dialog :visible.sync="showPic" v-dialogDrag custom-class="imgsAMG dee">
      <span>
        <img :src="showPicUrl" />
      </span>
    </el-dialog>
    </div>
</template>
<script>
import productLampTable from '@/views/component/productLampTable.vue'
import $ from 'jquery'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default{
    data(){
        return{
            zero:0,
            showPic: false, //查看图片
            showPicUrl: "", //图片地址
            lumTypeList:[],
            colorTempList:[],
            controlTypeStrList:[],
            chooseSeriesIdList:[],
            request:{
                isPublic:1,
                brandIds:'', //灯具品牌 多选
                lumTypes:'', //灯具类型 多选
                lumPowerMin:'',
                lumPowerMax:'', //功率
                colorTempLike:'', //色温色彩
                colorTempMin:'', 
                colorTempMax:'', //区间值
                guangTongLiangMin:'',
                guangTongLiangMax:'',  //光通量
                lightAngleMin:'',
                lightAngleMax:'',//光束角
                controlTypeStrLike:'', //控制方式
                effectDescLike:'', //效果描述
                page:1,
                rows:20
            },
            detailInfo:{},
            param:'1' ,
            cds:'',
            tableStatus:1,
            
            searchParam:{},
            searchParam2:{},
            lumPowerValue: [],
            lumPowerRound: {},
            lightAngleValue: [],
            lightAngleRound: {},
            guangTongLiangValue: [],
            guangTongLiangRound: {},
            raValue: [],
            raRound: {},
        }
    },
    watch:{
        lumTypeList:function(val,old){
            this.request.lumTypes = val.join(',')
            this.loadPowerDeng()
            this.search(1)
        },
        colorTempList:function(val,old){
            this.request.colorTemps = val.join(',')
            this.loadPowerDeng()
            this.search(1)
        },
        controlTypeStrList:function(val,old){
            this.request.controlTypeStrs = val.join(',')
            this.loadPowerDeng()
            this.search(1)
        },
    },
    components:{
        productLampTable
    },
    methods:{
        changeTiao(){
            this.search(1)
            this.loadKZFSdeng()
        },
        
        viewPicture(url) {
            this.showPic = true;
            this.showPicUrl = url;
        },
        brandPage(id){
            let routeUrl = this.$router.resolve({
                path: "/brandPage?id="+id
            });
            window.open(routeUrl.href, '_blank');
        },
        showSliderTips(val){
            if(isNaN(val[0])){
                return false
            }
            return true
        },
        tableOver(){
            this.search(1)
        },
        search(page){
            this.request.page = page
            this.request.seriesId=this.$route.query.id
            this.request.brandId=this.detailInfo.brandId
            this.request.lumPowerMin  = this.lumPowerValue[0]
            this.request.lumPowerMax  = this.lumPowerValue[1]
            this.request.lightAngleMin   = this.lightAngleValue[0]
            this.request.lightAngleMax  = this.lightAngleValue[1]
            this.request.guangTongLiangMin    = this.guangTongLiangValue[0]
            this.request.guangTongLiangMax  = this.guangTongLiangValue[1]
            this.request.raMin  = this.raValue[0]
            this.request.raMax  = this.raValue[1]
            this.$refs.table.search(this.request)
        },
        
        initData(id){
            let self = this
            this.$http.get('/api/banner/serires/'+id,{},function(res){
                if(res.success){
                    self.detailInfo = res.data
                    self.getParam()
                }
            })
        },
        
        getParam(){
             let self = this
            //获取最大值最小值
            this.$http.get("/api/banner/stlamps/getMaxMinBySupplierStlamp", {brandId:this.detailInfo.brandId,seriesId:this.detailInfo.id,lumTypes:this.request.lumTypes,colorTemps:this.request.colorTemps,controlTypeStrs:this.request.controlTypeStrs}, function(res) {
                if (res.success) {
                    self.searchParam = res.data
                    let powerMin = res.data.lumPowerMin
                    let powerMax = res.data.lumPowerMax
                    if(powerMin != undefined && powerMax != undefined){
                        if(self.lumPowerValue.length == 0){
                            self.lumPowerValue = [powerMin,powerMax]
                        }
                        self.lumPowerRound = {}
                        self.lumPowerRound[powerMin] = powerMin + "W"
                        self.lumPowerRound[powerMax] = powerMax + "W"
                    }
                    let lightAngleMin = res.data.lightAngleMin
                    let lightAngleMax = res.data.lightAngleMax
                    if(lightAngleMin != undefined & lightAngleMax != undefined){
                        if(self.lightAngleValue.length == 0){
                            self.lightAngleValue = [lightAngleMin,lightAngleMax]
                        }
                        self.lightAngleRound = {}
                        self.lightAngleRound[lightAngleMin] = lightAngleMin  +'°'
                        self.lightAngleRound[lightAngleMax] = lightAngleMax  +'°'
                    }
                    let guangTongLiangMin = res.data.guangTongLiangMin
                    let guangTongLiangMax = res.data.guangTongLiangMax
                    if(guangTongLiangMin != undefined & guangTongLiangMax != undefined){
                        if(self.guangTongLiangValue.length == 0){
                            self.guangTongLiangValue = [guangTongLiangMin,guangTongLiangMax]
                        }
                        self.guangTongLiangRound = {}
                        self.guangTongLiangRound[guangTongLiangMin] = guangTongLiangMin + "lm",
                        self.guangTongLiangRound[guangTongLiangMax] = guangTongLiangMax +'lm'
                    }
                    let raMin = res.data.raMin
                    let raMax = res.data.raMax
                    if(raMin != undefined & raMax != undefined){
                        if(self.raValue.length == 0){
                            self.raValue = [raMin,raMax]
                        }
                        self.raRound = {}
                        self.raRound[raMin] = raMin ,
                        self.raRound[raMax] = raMax
                    }
                    
                    var data ={
                        brandId:self.detailInfo.brandId,
                        seriesId:self.detailInfo.id,
                        lumPowerMin:powerMin,
                        lumPowerMax:powerMax,
                        lightAngleMin:lightAngleMin,
                        lightAngleMax:lightAngleMax,
                        guangTongLiangMin:guangTongLiangMin,
                        guangTongLiangMax:guangTongLiangMax,
                        raMin:raMin,
                        raMax:raMax,
                    }
                    //获取筛选参数
                    self.$http.get("/api/banner/stlamps/listLumType", data, function(res) {
                        if (res.success) {
                            console.log(res)
                            self.searchParam2 = res.data
                        }
                    });
                }
                
            });
        },
        loadKZFSdeng(){
            let self = this
            var data ={
                brandId:this.detailInfo.brandId,
                seriesId:this.detailInfo.id,
                lumPowerMin:this.request.lumPowerMin,
                lumPowerMax:this.request.lumPowerMax,
                lightAngleMin:this.request.lightAngleMin,
                lightAngleMax:this.request.lightAngleMax,
                guangTongLiangMin:this.request.guangTongLiangMin,
                guangTongLiangMax:this.request.guangTongLiangMax,
                raMin:this.request.raMin,
                raMax:this.request.raMax,
            }
            //获取筛选参数
            this.$http.get("/api/banner/stlamps/listLumType", data, function(res) {
                if (res.success) {
                    console.log(res)
                    self.searchParam2 = res.data
                }
            });
        },
        loadPowerDeng(){
            let self = this
            //获取最大值最小值
            this.$http.get("/api/banner/stlamps/getMaxMinBySupplierStlamp", {brandId:this.detailInfo.brandId,seriesId:this.detailInfo.id,lumTypes:this.request.lumTypes,colorTemps:this.request.colorTemps,controlTypeStrs:this.request.controlTypeStrs}, function(res) {
                if (res.success) {
                    self.searchParam = res.data
                    let powerMin = res.data.lumPowerMin
                    let powerMax = res.data.lumPowerMax
                    if(powerMin != undefined && powerMax != undefined){
                        if(self.lumPowerValue.length == 0){
                            self.lumPowerValue = [powerMin,powerMax]
                        }
                        self.lumPowerRound = {}
                        self.lumPowerRound[powerMin] = powerMin + "W"
                        self.lumPowerRound[powerMax] = powerMax + "W"
                    }
                    let lightAngleMin = res.data.lightAngleMin
                    let lightAngleMax = res.data.lightAngleMax
                    if(lightAngleMin != undefined & lightAngleMax != undefined){
                        if(self.lightAngleValue.length == 0){
                            self.lightAngleValue = [lightAngleMin,lightAngleMax]
                        }
                        self.lightAngleRound = {}
                        self.lightAngleRound[lightAngleMin] = lightAngleMin  +'°'
                        self.lightAngleRound[lightAngleMax] = lightAngleMax  +'°'
                    }
                    let guangTongLiangMin = res.data.guangTongLiangMin
                    let guangTongLiangMax = res.data.guangTongLiangMax
                    if(guangTongLiangMin != undefined & guangTongLiangMax != undefined){
                        if(self.guangTongLiangValue.length == 0){
                            self.guangTongLiangValue = [guangTongLiangMin,guangTongLiangMax]
                        }
                        self.guangTongLiangRound = {}
                        self.guangTongLiangRound[guangTongLiangMin] = guangTongLiangMin + "lm",
                        self.guangTongLiangRound[guangTongLiangMax] = guangTongLiangMax +'lm'
                    }
                    let raMin = res.data.raMin
                    let raMax = res.data.raMax
                    if(raMin != undefined & raMax != undefined){
                        if(self.raValue.length == 0){
                            self.raValue = [raMin,raMax]
                        }
                        self.raRound = {}
                        self.raRound[raMin] = raMin ,
                        self.raRound[raMax] = raMax
                    }
                }
            });
        },
        scrollimg(){
            var seriesPage2 = new Swiper('.seriesPage2', {
            pagination: {
                el: '.seriesPage2 .swiper-pagination',
                clickable: true
            },
            loop:true,
            autoplay: {
                delay: 5000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            speed: 500,
            resizeReInit: true,
        })
        }
    },
    created(){
        var id = this.$route.query.id
        this.initData(id)
    },
     mounted(){
         setTimeout(this.scrollimg,1000);
         this.$nextTick(function () {
            this.scrollimg();
           })
     }
}
</script>  
<style rel="stylesheet/scss" lang="scss">
    .lampListDetails{
        margin-top: 88px;
        .sct{
            padding: 30px;
            background: #fff;
            box-shadow: -7px 6px 10px 0px rgba(90, 99, 163, 0.06);
            border-radius: 5px;
            margin-bottom: 30px;
            .font20{
                color: #333333;
                margin-bottom: 12px;
                span:first-child{
                    color: #5962a3;
                    margin-right: 10px;
                }
                span:last-child{
                    float: right;
                    img{
                        display: inline-block;
                        margin-right: 5px;
                    }
                }
            }
           .seriesPage{
               display: flex;
               display: -webkit-flex;
               .lt{
                   width: 40%;
                   margin-right: 2%;
                   background-color: #f6f7fb;
                   padding: 25px;
               }
               .rt{
                   width: 58%;
                   background-color: #f6f7fb;
                   padding: 25px 35px;
                   .font20{
                       color: #666666;
                       margin-bottom: 20px;
                   }
                   .font24{
                        color: #333333;
                         margin-bottom: 10px;  
                   }
                   p{
                       color: #666666;
                       line-height: 1.8;
                   }
               }
               .seriesPage2{
                   .swiper-slide{
                        border-radius: 4px 4px 0px 0px;
                   }
                   .swiper-pagination-bullet{
                       width: 10px;
                        height: 10px;
                        background-color: #ffffff;
                        border-radius: 7px;
                   }
               }
           }
        }
        .sameSeries{
            margin-top: 30px;
            
            .font20{
                text-align: center;
                margin-bottom: 15px;
                color: #5a63a3;
                font-weight: bold;
            }
           ul{
                float:left;
                overflow: hidden;
                li{
                     width: 100%;
                    padding: 12px 8px;
                    color: #888888;
                    float: left;
                    // height: 62px;
                    //border-bottom: 1px solid #ccc;
                    border-right: 2px solid #ccc;
                    // &:nth-child(2n){
                    //     border-right: none
                    // }
                     .el-radio__input{
                        display: none;
                    }
                    label{
                        width: auto;
                        text-align: center; 
                        margin-right: 10px;
                        margin-bottom: 5px;
                        border: 1px solid #DCDFE6;
                        border-radius: 4px !important;
                            overflow: hidden;
                        .el-checkbox-button__inner{
                            border: none;
                        }
                         &.el-checkbox-button.is-checked .el-checkbox-button__inner{
                            color: #fff;
                            background-color: #5a63a3;   
                        }
                        &.el-radio{
                            height: 30px;
                            line-height: 30px;
                             padding: 0;
                             margin-bottom: 5px;
                             .el-radio__label{
                                 padding: 0;
                             }
                        }
                        &:first-child .el-checkbox-button__inner{
                            border-left: none;
                        }
                        &.is-bordered.is-checked{
                            border-radius: 5px;
                            border: solid 1px #e8e8e8;
                            color: #fff;
                            background-color: #5a63a3;                            
                            .el-radio__label{
                                color: #ffffff;
                            }
                        }
                    }
                    .trd{
                        width: 70px;
                        text-align: right;
                        line-height: 36px;
                        float: left;
                    }
                    .el-radio-group{
                        width: calc(100% - 80px);
                        float: left;
                    }
                    .block{
                        width: calc(100% - 90px);
                        float: left;
                        padding: 0 40px 0 50px;
                        .el-slider__bar{
                            background-color: #5a63a3;
                        }
                        .el-slider__button{
                            border-color: #5962a3
                        }
                        .el-slider__marks-text{
                            margin-top:-8px;
                            -webkit-transform: translateX(-51px);
                            transform: translateX(-51px); 
                            width: 40px;
                            text-align: right;
                            &:nth-child(2){
                                transform: translateX(11px);
                                -webkit-transform: translateX(11px);
                                text-align: left;
                            }
                        }
                    }
                    &:last-child{
                       
                            border-bottom: none;
                       
                    }
                    &:first-child{
                        border-left: none;
                    }
                }
            }
            ul.ulss{
                li{
                    border-right: none;
                }
            }
        }
    }
    .screenTable{
        margin-top: 25px;
     li {
        width: calc(20% - 16px);
        margin-left: 20px;
        float: left;
        margin-bottom: 20px;
        background-color: #f7f7f7;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        &:nth-child(5n + 1){
            margin-left: 0;
        }
        .des {
            border-radius: 4px 4px 0px 0px;
            background-repeat: no-repeat;
            background-size: cover;
            height: 160px;
            cursor: pointer;
        }
        .cont {
            padding: 12px;
        }
        .font16 {
            color: #5a63a3;
        }
        .font14 {
            color: #666666;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            word-break: break-all;
            line-height: 20px;
            height: 20px;
        }
    }
}
.screenTable2{
    margin-top: 22px;
    th{
        background-color: #f6f7fb;
        color: #555555;
            text-align: center;
    }
    .el-table{
        td{
            text-align: center;
            &:last-child{
                .btns_S{
                    display: none;
                    .btn2{
                        font-size: 12px;
                        line-height: 1.5em;                       
                        border-radius: 4px;                       
                        margin: 2px;
                        display: inline-block;
                        color: #fff;
                    }
                }
                &:hover{
                    background-color: #5a63a3;
                    .btns_S{
                        display: block;
                    }
                    .btns_S2{
                        display: none;
                    }
                }
            }
            .nclo{
                    color: #5962a3;
                    font-weight: bold;
                    cursor: pointer;
            }
        }
    }
}
.screenTables{
    background-color: #ffffff;
	box-shadow: -7px 6px 10px 0px 
		rgba(90, 99, 163, 0.06);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 40px;
    .rt{
         text-align: right;
        margin-bottom: 15px;
        span{
            img{
                display: inline-block;
            }
            &.list_S{
                button {
                    position: relative;
                    top: 4px;
                    padding: 0 0 5px;
                    border: none;
                        span {
                        position: relative;
                        top: -5px;
                        display: inline-block;
                        color: #999;
                        img {
                            position: relative;
                            top: 5px;
                            margin-right:5px;
                        }
                    }
                }
            }
            &.xuan{
                margin-right: 12px;
                display: inline-block;
                position: relative;
                top:5px;
            }
        }
    }
}
</style>